<!DOCTYPE html>
<html lang="zh">
<head>
    {{template "header" (ossUrl)}}
    <link href="/resource/ajax/libs/select2/select2.min.css" rel="stylesheet"/>
    <link href="/resource/ajax/libs/select2/select2-bootstrap.css" rel="stylesheet"/>
    <style type="text/css">
        .select-table table {
            table-layout: fixed;
        }

        .table > thead > tr > th {
            text-align: center;
        }

        .select-table .table td {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .form-control {
            padding: 3px 6px 4px;
            height: 30px;
        }

        .icheckbox-blue {
            top: 0px;
            left: 6px;
        }

        .form-control.select2-hidden-accessible {
            position: static !important;
        }

        .select-table table label.error {
            position: inherit;
        }

        select + label.error {
            z-index: 1;
            right: 40px;
        }
    </style>
</head>
<body class="gray-bg"
      style="font: 14px Helvetica Neue, Helvetica, PingFang SC, 微软雅黑, Tahoma, Arial, sans-serif !important;">
<section class="section-content">
    <div class="row">
        <div class="col-xs-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content" style="border-style:none;">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li><a href="#tab-basic" data-toggle="tab" aria-expanded="false">基本信息</a></li>
                            <li class="active"><a href="#tab-field" data-toggle="tab" aria-expanded="true">字段信息</a></li>
                            <li><a href="#tab-gen" data-toggle="tab" aria-expanded="false">生成信息</a></li>
                            <li class="pull-right header">
                                <i class="fa fa-code"></i> 生成配置
                            </li>
                        </ul>
                        <form id="form-gen-edit" class="form-horizontal">
                            <input name="tableId" type="hidden" value="{{.table.TableId}}"/>
                            <div class="tab-content">
                                <!-- 基本信息 -->
                                <div class="tab-pane" id="tab-basic">
                                    <div class="row mt20">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label"><span
                                                            style="color: red; ">*</span>表名称：</label>
                                                <div class="col-sm-8">
                                                    <input name="tableName" class="form-control" type="text"
                                                           placeholder="请输入表名称" maxlength="200"
                                                           value="{{.table.TableName}}"
                                                           required>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label"><span
                                                            style="color: red; ">*</span>表描述：</label>
                                                <div class="col-sm-8">
                                                    <input name="tableComment" class="form-control" type="text"
                                                           placeholder="请输入表描述" maxlength="500"
                                                           value="{{.table.TableComment}}" required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label"><span
                                                            style="color: red; ">*</span>实体包名称：</label>
                                                <div class="col-sm-8">
                                                    <input name="className" class="form-control" type="text"
                                                           placeholder="请输入实体包名称" maxlength="100"
                                                           value="{{.table.ClassName}}" required>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label"><span
                                                            style="color: red; ">*</span>作者：</label>
                                                <div class="col-sm-8">
                                                    <input name="functionAuthor" class="form-control" type="text"
                                                           placeholder="请输入作者" maxlength="50"
                                                           value="{{.table.FunctionAuthor}}" required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <label class="col-xs-2 control-label">备注：</label>
                                                <div class="col-xs-10">
                                                    <textarea name="remark" maxlength="500" class="form-control"
                                                              rows="3"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 字段信息 -->
                                <div class="tab-pane active" id="tab-field">
                                    <div class="select-table table-striped"
                                         style="margin-top: 0px;padding-top: 0px;padding-bottom: 0px;">
                                        <table id="bootstrap-table" data-use-row-attr-func="true"
                                               data-reorderable-rows="true"></table>
                                    </div>
                                </div>

                                <!-- 生成信息 -->
                                <div class="tab-pane" id="tab-gen">
                                    <div class="row mt20">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label"><span
                                                            style="color: red; ">*</span>生成模板：</label>
                                                <div class="col-sm-8">
                                                    <select class='form-control' id="tplCategory" name='tplCategory'
                                                            style="width: 100%">
                                                        <option value="crud" value="{{.table.TplCategory}}">单表（增删改查）
                                                        </option>
                                                        <option value="tree" value="{{.table.TplCategory}}">树表（增删改查）
                                                        </option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label"
                                                       title="生成根包名"><span
                                                            style="color: red; ">*</span>生成根包名：<i
                                                            class="fa fa-question-circle-o"></i></label>
                                                <div class="col-sm-8">
                                                    <input name="packageName" class="form-control" type="text"
                                                           placeholder="请输入生成根包名" maxlength="100"
                                                           value="{{.table.PackageName}}" required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label" title="可理解为子系统名，例如 system"><span
                                                            style="color: red; ">*</span>生成模块名：<i
                                                            class="fa fa-question-circle-o"></i></label>
                                                <div class="col-sm-8">
                                                    <input name="moduleName" class="form-control" type="text"
                                                           placeholder="请输入生成模块名" maxlength="30"
                                                           value="{{.table.ModuleName}}" required>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label" title="可理解为功能英文名，例如 user"><span
                                                            style="color: red; ">*</span>生成业务名：<i
                                                            class="fa fa-question-circle-o"></i></label>
                                                <div class="col-sm-8">
                                                    <input name="businessName" class="form-control" type="text"
                                                           placeholder="请输入生成业务名" maxlength="50"
                                                           value="{{.table.BusinessName}}" required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <div class="form-group">
                                                <label class="col-sm-4 control-label" title="用作类描述，例如 用户"><span
                                                            style="color: red; ">*</span>生成功能名：<i
                                                            class="fa fa-question-circle-o"></i></label>
                                                <div class="col-sm-8">
                                                    <input name="functionName" class="form-control" type="text"
                                                           placeholder="请输入生成功能名" maxlength="50"
                                                           value="{{.table.FunctionName}}" required>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="hidden" id="otherInfo">
                                        <h4 class="form-header h4">其他信息</h4>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label"
                                                           title="树显示的编码字段名， 如：dept_id"><span
                                                                style="color: red; ">*</span>树编码字段：<i
                                                                class="fa fa-question-circle-o"></i></label>
                                                    <div class="col-sm-8">
                                                        <select class='form-control' id="treeCode"
                                                                name='params[treeCode]' style="width: 100%">
                                                            <option value="">---请选择---</option>
                                                            {{range $index, $column := .table.Columns}}
                                                                <option value="{{$column.ColumnName}}">{{$column.ColumnName}}
                                                                    ：{{$column.ColumnComment}}</option>
                                                            {{end}}
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label"
                                                           title="树显示的父编码字段名， 如：parent_Id"><span
                                                                style="color: red; ">*</span>树父编码字段：<i
                                                                class="fa fa-question-circle-o"></i></label>
                                                    <div class="col-sm-8">
                                                        <select class='form-control' id="treeParentCode"
                                                                name='params[treeParentCode]' style="width: 100%">
                                                            <option value="">---请选择---</option>
                                                            {{range $index, $column := .table.Columns}}
                                                                <option value="{{$column.ColumnName}}">{{$column.ColumnName}}
                                                                    ：{{$column.ColumnComment}}</option>
                                                            {{end}}
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label class="col-sm-4 control-label"
                                                           title="树节点的显示名称字段名， 如：dept_name"><span
                                                                style="color: red; ">*</span>树名称字段：<i
                                                                class="fa fa-question-circle-o"></i></label>
                                                    <div class="col-sm-8">
                                                        <select class='form-control' id="treeName"
                                                                name='params[treeName]' style="width: 100%">
                                                            <option value="">---请选择---</option>
                                                            {{range $index, $column := .table.Columns}}
                                                                <option value="{{$column.ColumnName}}">{{$column.ColumnName}}
                                                                    ：{{$column.ColumnComment}}</option>
                                                            {{end}}
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="box-footer">
                    <div class="col-sm-offset-5 col-sm-6">
                        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i
                                    class="fa fa-check"></i>保 存
                        </button>&nbsp;
                        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i
                                    class="fa fa-reply-all"></i>关 闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{{template "footer" (ossUrl)}}
<script src="/resource/ajax/libs/select2/select2.min.js"></script>
<script src="/resource/ajax/libs/bootstrap-table/extensions/reorder/bootstrap-table-reorder.js"></script>
<script src="/resource/ajax/libs/bootstrap-table/extensions/reorder/jquery.tablednd.js"></script>
<script src="/resource/js/jquery.tmpl.js"></script>
<script type="text/javascript">
    /*用户信息-修改*/
    $("#form-table-edit").validate({
        rules: {
            tableName: {
                required: true,
            },
        },
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            //var forms = $("#form-gen-edit").serializeArray();
            var formData = "tableId=" + $("input[name='tableId']").val();
            formData += "&tableName=" + $("input[name='tableName']").val();
            formData += "&tableComment=" + $("input[name='tableComment']").val();
            formData += "&className=" + $("input[name='className']").val();
            formData += "&functionAuthor=" + $("input[name='functionAuthor']").val();

            formData += "&remark=" + document.getElementsByName("remark")[0].value;
            formData += "&packageName=" + $("input[name='packageName']").val();
            formData += "&moduleName=" + $("input[name='moduleName']").val();
            formData += "&businessName=" + $("input[name='businessName']").val();
            formData += "&functionName=" + $("input[name='functionName']").val();

            var tplCategory = $("#tplCategory option:selected").val();
            formData += "&tplCategory=" + tplCategory;

            if (tplCategory == "tree") {
                var treeCode = $("#treeCode option:selected").val();
                var treeParentCode = $("#treeParentCode option:selected").val();
                var treeName = $("#treeName option:selected").val();
                var params = {
                    "treeCode": treeCode,
                    "treeParentCode": treeParentCode,
                    "treeName": treeName,
                };

                formData += "&params=" + JSON.stringify(params);
            }

            var counts = $("#bootstrap-table").find("tr").length;
            var columns = [];
            if (counts > 0) {
                for (var i = 0; i < counts; i++) {
                    var columnId = $("input[name='columns[" + i + "].columnId']").val();
                    var columnComment = $("input[name='columns[" + i + "].columnComment']").val();
                    var goType = $("select[name='columns[" + i + "].goType'] option:selected").val();
                    var htmlType = $("select[name='columns[" + i + "].htmlType'] option:selected").val();
                    var goField = $("input[name='columns[" + i + "].goField']").val();
                    var dictType = $("input[name='columns[" + i + "].dictType']").val();
                    var queryType = $("select[name='columns[" + i + "].queryType'] option:selected").val();

                    var isInsert = 0;
                    if ($("input[name='columns[" + i + "].isInsert']").is(':checked')) {
                        isInsert = 1;
                    }
                    var isEdit = 0;
                    if ($("input[name='columns[" + i + "].isEdit']").is(':checked')) {
                        isEdit = 1;
                    }
                    var isList = 0;
                    if ($("input[name='columns[" + i + "].isList']").is(':checked')) {
                        isList = 1;
                    }
                    var isQuery = 0;
                    if ($("input[name='columns[" + i + "].isQuery']").is(':checked')) {
                        isQuery = 1;
                    }
                    var column = {
                        "columnId": columnId,
                        "columnComment": columnComment,
                        "goType": goType,
                        "htmlType": htmlType,
                        "goField": goField,
                        "dictType": dictType,
                        "queryType": queryType,
                        "isInsert": isInsert,
                        "isEdit": isEdit,
                        "isList": isList,
                        "isQuery": isQuery,
                    }

                    columns.push(column);
                }
            }
            formData += "&columns=" + JSON.stringify(columns);
            $.operate.saveTab(prefix + "/edit", formData);
        }
    }

    var prefix = ctx + "tool/gen";
    $(function () {
        var options = {
            url: prefix + "/column/list",
            sortName: "sort",
            sortOrder: "desc",
            height: $(window).height() - 166,
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            onLoadSuccess: onLoadSuccess,
            onReorderRow: onReorderRow,
            columns: [{
                title: "序号",
                width: "5%",
                formatter: function (value, row, index) {
                    // 编号隐藏域
                    var columnIdHtml = $.common.sprintf("<input type='hidden' name='columns[%s].columnId' value='%s'>", index, row.column_id);
                    // 排序隐藏域
                    var sortHtml = $.common.sprintf("<input type='hidden' name='columns[%s].sort' value='%s' id='columns_sort_%s'>", index, row.sort, row.column_id);
                    return columnIdHtml + sortHtml + $.table.serialNumber(index);
                },
                cellStyle: function (value, row, index) {
                    return {css: {"cursor": "move"}};
                }
            },
                {
                    field: 'column_name',
                    title: '字段列名',
                    width: "10%",
                    class: "nodrag",
                    cellStyle: function (value, row, index) {
                        return {css: {"cursor": "default"}};
                    }
                },
                {
                    field: 'column_comment',
                    title: '字段描述',
                    width: "10%",
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='columns[%s].columnComment' value='%s'>", index, value);
                        return html;
                    }
                },
                {
                    field: 'column_type',
                    title: '物理类型',
                    width: "10%",
                    class: "nodrag",
                    cellStyle: function (value, row, index) {
                        return {css: {"cursor": "default"}};
                    }
                },
                {
                    field: 'go_type',
                    title: 'Go类型',
                    width: "10%",
                    formatter: function (value, row, index) {
                        var data = [{index: index, goType: value}];
                        return $("#goTypeTpl").tmpl(data).html();
                    }
                },
                {
                    field: 'go_field',
                    title: 'Go属性',
                    width: "10%",
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='columns[%s].goField' value='%s' required>", index, value);
                        return html;
                    }
                },
                {
                    field: 'is_insert',
                    title: '插入',
                    width: "5%",
                    formatter: function (value, row, index) {
                        var isCheck = value == 1 ? 'checked' : '';
                        var html = $.common.sprintf("<label class='check-box'><input type='checkbox' name='columns[%s].isInsert' value='1' %s></label>", index, isCheck);
                        return html;
                    }
                },
                {
                    field: 'is_edit',
                    title: '编辑',
                    width: "5%",
                    formatter: function (value, row, index) {
                        var isCheck = value == 1 ? 'checked' : '';
                        var html = $.common.sprintf("<label class='check-box'><input type='checkbox' name='columns[%s].isEdit' value='1' %s></label>", index, isCheck);
                        return html;
                    }
                },
                {
                    field: 'is_list',
                    title: '列表',
                    width: "5%",
                    formatter: function (value, row, index) {
                        var isCheck = value == 1 ? 'checked' : '';
                        var html = $.common.sprintf("<label class='check-box'><input type='checkbox' name='columns[%s].isList' value='1' %s></label>", index, isCheck);
                        return html;
                    }
                },
                {
                    field: 'is_query',
                    title: '查询',
                    width: "5%",
                    formatter: function (value, row, index) {
                        var isCheck = value == 1 ? 'checked' : '';
                        var html = $.common.sprintf("<label class='check-box'><input type='checkbox' name='columns[%s].isQuery' value='1' %s></label>", index, isCheck);
                        return html;
                    }
                },
                {
                    field: 'query_type',
                    title: '查询方式',
                    width: "10%",
                    formatter: function (value, row, index) {
                        var data = [{index: index, queryType: value}];
                        return $("#queryTypeTpl").tmpl(data).html();
                    }
                },
                {
                    field: 'is_required',
                    title: '必填',
                    width: "5%",
                    formatter: function (value, row, index) {
                        var isCheck = value == 1 ? 'checked' : '';
                        var html = $.common.sprintf("<label class='check-box'><input type='checkbox' name='columns[%s].isRequired' value='1' %s></label>", index, isCheck);
                        return html;
                    }
                },
                {
                    field: 'html_type',
                    title: '显示类型',
                    width: "12%",
                    formatter: function (value, row, index) {
                        var data = [{index: index, htmlType: value}];
                        return $("#htmlTypeTpl").tmpl(data).html();
                    }
                },
                {
                    field: 'dict_type',
                    title: '字典类型',
                    width: "13%",
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input class='form-control' type='text' name='columns[%s].dictType' value='%s' id='columns_dict_%s'>", index, value, row.column_id);
                        return "<div class='input-group'>" + html + "<span class='input-group-addon input-sm' onclick='selectDictTree(" + row.column_id + ", this)'><i class='fa fa-search'></i></span></div>";
                    },
                    cellStyle: function (value, row, index) {
                        return {css: {"cursor": "default"}};
                    }
                }]
        };
        $.table.init(options);
    });

    // 当所有数据被加载时触发处理函数
    function onLoadSuccess(data) {
        $.fn.select2.defaults.set("theme", "bootstrap");
        $("select.form-control").each(function () {
            $(this).select2().on("change", function () {
                $(this).valid();
            })
        })
        $(".check-box").each(function () {
            $(this).iCheck({
                checkboxClass: 'icheckbox-blue'
            })
        })
    }

    // 当拖拽结束后处理函数
    function onReorderRow(data) {
        for (var i = 0; i < data.length; i++) {
            $("#columns_sort_" + data[i].columnId).val(i + 1);
        }
    }

    $(function () {
        var tplCategory = $("#tplCategory option:selected").val();
        tplCategoryVisible(tplCategory);
    });

    $('#tplCategory').on('select2:select', function (event) {
        var tplCategory = $(event.target).val();
        tplCategoryVisible(tplCategory);
    });

    function tplCategoryVisible(tplCategory) {
        if ("crud" == tplCategory) {
            $("#treeCode").select2("val", [""]);
            $("#treeParentCode").select2("val", [""]);
            $("#treeName").select2("val", [""]);
            $("#otherInfo").addClass("hidden");

        } else if ("tree" == tplCategory) {
            $("#otherInfo").removeClass("hidden");
            $("#treeCode").attr("required", "true");
            $("#treeParentCode").attr("required", "true");
            $("#treeName").attr("required", "true");
        }
    }

    // 选择字典处理函数
    function selectDictTree(columnId, obj) {
        var dictType = $.common.nullToStr($(obj).parent().find("input").val());
        var url = ctx + "system/dict/selectDictTree?columnId=" + columnId + "&dictType=" + dictType;
        var options = {
            title: '选择字典类型',
            width: "380",
            url: url,
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }

    function doSubmit(index, layero) {
        var body = layer.getChildFrame('body', index);
        var columnId = body.find('#columnId').val();
        var dictType = body.find('#dictType').val();
        layer.close(index);
        $("#columns_dict_" + columnId).val(dictType);
    }
</script>
</body>
</html>

<!-- Go类型 -->
{{.goTypeTpl}}

<!-- 查询方式 -->
{{.queryTypeTpl}}

<!-- 显示类型 -->
{{.htmlTypeTpl}}